<!-- 模板 -->
<template>
  <div class="course">
      <div class="box">
        <div class="btn">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="add">添加</el-button>
        </div>
        <el-card>
            <el-table :data="tableData" border style="width: 100%" >
                <el-table-column type="index" label="序号" align="center" width="80" />
                <el-table-column prop="name" label="课程名字" align="center">
                    <template slot-scope="scope">
                        <el-link   @click="chakan(scope.row)">{{scope.row.name}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="coverPicture" label="图片" align="center" width="200">
                    <template slot-scope="scope">
                        <el-image  style="width: 80px;" :src="scope.row.coverPicture"  :preview-src-list="[scope.row.coverPicture]"> </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格" align="center" width="120"> </el-table-column>
                <el-table-column prop="synopsis" label="简介" align="center" :show-overflow-tooltip="true"> </el-table-column>
                <!-- <el-table-column prop="content" label="描述" align="center" :show-overflow-tooltip="true"> </el-table-column> -->
                <el-table-column  label="操作" align="center" >
                    <template slot-scope="scope">
                        <el-button @click="handleUpdateClick(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修 改</el-button>
                        <el-button @click="handleDetClick(scope.row)" type="danger" size="small" icon="el-icon-delete" plain>删 除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <pagination
        v-show="newsTotal > 0"
        :total="newsTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getInformationList"
      />
      </div>

<el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="45%"
  :before-close="handleClose">
<el-form :label-position="labelPosition" label-width="80px" :model="form" :rules="rules" ref="form">
    <el-form-item label="课程名字" prop="name" >
        <el-input v-model="form.name" style="width:280px"></el-input>
    </el-form-item>
    <el-form-item label="图片:" prop="coverPicture">
        <el-upload
        :headers='headers'
        class="avatar-uploader"
        :action="upImage+'/table/upload'"
        :on-success="handleAvatarSuccess"
        :show-file-list="false"
        >
        <img v-if="form.coverPicture" :src="form.coverPicture" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </el-form-item>
    <el-form-item label="价格" prop="price" >
        <el-input v-model="form.price" style="width:280px"></el-input>
    </el-form-item>
    <el-form-item label="简介" prop="synopsis">
        <el-input type="textarea" maxlength="100" :rows="2" placeholder="请输入内容" v-model="form.synopsis"> </el-input>
    </el-form-item>
    <el-form-item label="描述" prop="content">
        <quill-editor 
        v-model="form.content" 
        ref="myQuillEditor" 
        :options="editorOption" >
        </quill-editor>
    </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer" v-if="showBtn">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit" >确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { getCourseList,getAdd,getUpdate,getDet,getDsc,} from "@/api/certificate/index";

export default {
  name: '',
  data () {
    return {
        headers: { Authorization: "Bearer " + getToken() },
        upImage: process.env.VUE_APP_BASE_API,
        labelPosition: 'right',
        tableData:[],
        dialogVisible:false,
        title:'',
        form:{},
        loading:false,
        showBtn:true,
        queryParams: {
            pageNum: 1,
            pageSize: 10,
        },
        newsTotal:0,
        rules:{
          name: [
            { required: true, message: '请输入测量表名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          coverPicture: [
            { required: true, message: "图片不能为空", trigger: "blur" }
          ],
          price: [
              { required: true, message: '请输入价格', trigger: 'blur' },
              {
              pattern:  /^(0|[1-9][0-9]*)(\.\d{1,2})?$/,
              message: "只能输入数字,小数点保留两位",
            }
            ],
          synopsis: [
            { required: true, message: '请输入简介', trigger: 'blur' },
          ],
          describe: [
            { required: true, message: '请输入描述', trigger: 'blur' },
          ],
        },
        editorOption:{
          modules:{
                toolbar:[
                  ['bold', 'italic', 'underline', 'strike'],
                  [{ 'size': ['small', false, 'large', 'huge'] }],
                  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                  [{ 'color': [] }, { 'background': [] }], 
                  [{ 'direction': 'rtl' }],
                  [{ 'indent': '-1'}, { 'indent': '+1' }],
                ]
            }
        },
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    //   点击名字查看
    chakan(row){
      this.title = '查看'
      getDsc(row.id).then(res => {
        if(res.code == 200){
          // console.log(res);
          this.form = res.data
        }
      })
      this.showBtn= false
      this.dialogVisible = true
    },
    //   提交按钮
    onSubmit(){
      this.$refs["form"].validate(valid => {
        if(valid){
            if (this.form.id != undefined) {
                  getUpdate(this.form).then(res=>{
                      if(res.code == 200){
                          this.$message.success('编辑成功')
                          this.dialogVisible = false
                          this.getInformationList()
                      }
                  })
                } else{
                  getAdd(this.form).then(res=>{
                      if(res.code == 200){
                          this.$message.success('添加成功')
                          this.dialogVisible = false
                          this.getInformationList()
                      }
                  })
                }
        }
      
      });
    },
     // 获取所有
    getInformationList() {
      this.loading = true;
      getCourseList(this.queryParams).then(res => {
        // console.log(res);
        this.tableData = res.rows;
        this.newsTotal = res.total;
        this.loading = false;
      });
    },
    handleAvatarSuccess(res, file) {
      this.form.coverPicture = res.data
      this.form.coverPicture ='https://9001rzsxy.oss-cn-beijing.aliyuncs.com'+ res.data
      // console.log(this.form.coverPicture);
        if(res.code ==200){
          // this.form.coverPic = res.message
         this.$message.success("上传成功");
        }
    },
    //   删除按钮
    handleDetClick(row){
      const id = row.id ;
      // console.log(id)
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return getDet(id);
        })
        .then(() => {
          this.getInformationList();
          this.$message.success('删除成功')
        })
        .catch(function() {});
    },
    //   修改按钮
    handleUpdateClick(row){
      this.showBtn  =true
      this.dialogVisible = true
      getDsc(row.id).then(res => {
        if(res.code == 200){
          // console.log(res);
          this.form = res.data
          
        }
      })
      this.title = "编辑";
    },
    //   添加按钮
      add(){
        this.title = '添加'
        this.showBtn = true
        this.form = {
            coverPicture:"",
        }
        this.dialogVisible = true
        // this.show = false
      },
      handleClose(){
          this.dialogVisible = false
      },
  },
  created () {
    this.getInformationList()
  },
  mounted () {}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.box{
    margin: 10px;
    .btn{
        margin: 10px;
    }
}
.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.quill-editor{
    height: 100px;
    margin-bottom: 44px;
}
</style>
